<template>

  <div class="app-container calendar-list-container">
<!--会员服务不同时间卡片显示-->
    <el-tabs v-model="activeName">
      <!--tab1-->
      <el-tab-pane label="会员服务" name="first">
        <div class="table_name">
        <span class="person">某某某</span>
        </div>

        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="date" label="日期"></el-table-column>
          <el-table-column prop="time" label="时间"></el-table-column>
          <el-table-column prop="frequency" label="次数"></el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :total="50"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
          >
          </el-pagination>
        </div>

      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first',
      visible: [],
      delVisible: false,
      dialogVisible: false,
      title: null,
      tableData: [
        {
          date: '2017-08-25',
          time: '18:05',
          frequency: '50'
        }, {
          date: '2017-08-25',
          time: '18:05',
          frequency: '50'
        }, {
          date: '2017-08-25',
          time: '18:05',
          frequency: '50'
        }]
    }
  },
  created() {
    console.log('table created')
  },
  methods: {
    selfinfo() {
      this.$router.push({ path: '/cardDetail' })
    },
    closeDialog() {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
.table_name{
  margin-bottom: 20px;
  text-align: center;
  font-size: larger;
}
</style>
